<template>
  <div id="app">
    <!-- 只在非登录页面显示header -->
    <header v-if="currentRoute !== '/auth'" class="app-header">
      <nav class="nav-container">
        <div class="logo">
          <span class="logo-icon">💫</span>
          <span>心灵空间</span>
        </div>
        <ul class="nav-links" v-if="!isMobile">
          <li><router-link to="/" class="nav-link">首页</router-link></li>
          <li><router-link to="/diary" class="nav-link">情绪日记</router-link></li>
          <li><router-link to="/emotion-analysis" class="nav-link">情绪分析</router-link></li>
          <li><router-link to="/chat" class="nav-link">匿名陪聊</router-link></li>
          <li><router-link to="/relaxation" class="nav-link">放松练习</router-link></li>
          <li><router-link to="/resources" class="nav-link">心理资源</router-link></li>
          <li><router-link to="/about" class="nav-link">关于我们</router-link></li>
          <li v-if="isLoggedIn">
            <router-link to="/user-center" class="nav-link">个人中心</router-link>
          </li>
          <li v-if="!isLoggedIn">
            <router-link to="/auth" class="nav-link">登录/注册</router-link>
          </li>
          <li v-else>
            <button class="logout-btn" @click="handleLogout">退出登录</button>
          </li>
        </ul>
        <div class="mobile-menu-btn" @click="toggleMobileMenu" v-else>
          <span class="menu-icon"></span>
        </div>
      </nav>
      <!-- 移动端菜单 -->
      <div class="mobile-menu" v-show="showMobileMenu">
        <ul>
          <li><router-link to="/" exact @click="closeMobileMenu">首页</router-link></li>
          <li><router-link to="/diary" @click="closeMobileMenu">情绪日记</router-link></li>
          <li><router-link to="/emotion-analysis" @click="closeMobileMenu">情绪分析</router-link></li>
          <li><router-link to="/chat" @click="closeMobileMenu">匿名陪聊</router-link></li>
          <li><router-link to="/relaxation" @click="closeMobileMenu">放松练习</router-link></li>
          <li><router-link to="/resources" @click="closeMobileMenu">心理资源</router-link></li>
          <li><router-link to="/about" @click="closeMobileMenu">关于我们</router-link></li>
          <li v-if="isLoggedIn">
            <router-link to="/user-center" @click="closeMobileMenu">个人中心</router-link>
          </li>
          <li v-if="!isLoggedIn">
            <router-link to="/auth" @click="closeMobileMenu">登录/注册</router-link>
          </li>
          <li v-else>
            <button class="logout-btn" @click="handleLogout">退出登录</button>
          </li>
        </ul>
      </div>
    </header>
    
    <!-- 为AuthView页面特殊处理，不添加额外的样式 -->
    <div v-if="currentRoute === '/auth'" id="auth-container">
      <router-view />
    </div>
    <!-- 其他页面保持原有的main布局 -->
    <main v-else class="app-main">
      <transition name="fade" mode="out-in">
        <keep-alive>
          <router-view />
        </keep-alive>
      </transition>
    </main>
    
    <!-- 只在非登录页面显示footer -->
    <footer v-if="currentRoute !== '/auth'" class="app-footer">
      <div class="footer-content">
        <p>💖 每一份情绪都值得被温柔对待 💖</p>
        <p class="copyright">© 2024 心灵空间 - 您的心理健康伙伴</p>
      </div>
    </footer>
  </div>
</template>

<script>
import memberService, { initMemberService } from './services/memberService'

export default {
  name: 'App',
  data() {
    return {
      isLoggedIn: true, // 默认显示为已登录状态，便于测试个人中心
      currentRoute: '',
      isMember: false,
      showMobileMenu: false,
      isMobile: false
    }
  },
  computed: {
    // 获取会员状态
    isMember() {
      return memberService.isMember()
    }
  },
  mounted() {
    // 初始化会员服务
    initMemberService()
    // 检查用户登录状态
    this.checkLoginStatus()
    // 获取当前路由
    this.currentRoute = this.$route.path
    // 检查屏幕尺寸
    this.checkScreenSize()
    // 监听路由变化
    this.$router.afterEach((to) => {
      this.checkLoginStatus()
      this.currentRoute = to.path
      // 路由变化时更新会员状态
      this.isMember = memberService.isMember()
      // 关闭移动端菜单
      this.closeMobileMenu()
    })
    
    // 监听窗口大小变化
    window.addEventListener('resize', this.checkScreenSize)
    
    // 添加全局提示方法
    window.showToast = this.showToast
  },
  
  beforeUnmount() {
    window.removeEventListener('resize', this.checkScreenSize)
  },
  methods: {
    checkLoginStatus() {
      this.isLoggedIn = localStorage.getItem('user') !== null
      // 登录状态变化时更新会员状态
      if (this.isLoggedIn) {
        this.isMember = memberService.isMember()
      } else {
        this.isMember = false
      }
    },
    handleLogout() {
      // 清除localStorage中的用户信息
      localStorage.removeItem('user')
      localStorage.removeItem('token')
      this.isLoggedIn = false
      this.isMember = false
      // 关闭移动端菜单
      this.closeMobileMenu()
      // 重定向到登录页面
      this.$router.push('/auth')
    },
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768
    },
    toggleMobileMenu() {
      this.showMobileMenu = !this.showMobileMenu
    },
    closeMobileMenu() {
      this.showMobileMenu = false
    },
    // 全局提示方法
    showToast(message, type = 'info') {
      // 创建一个简单的toast组件
      const toast = document.createElement('div')
      toast.className = `toast toast-${type}`
      toast.textContent = message
      toast.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 20px;
        background-color: #B39DDB;
        color: white;
        border-radius: 8px;
        z-index: 9999;
        font-size: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: opacity 0.3s, transform 0.3s;
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
      `
      
      // 设置不同类型的背景色
      if (type === 'success') {
        toast.style.backgroundColor = '#66BB6A'
      } else if (type === 'warning') {
        toast.style.backgroundColor = '#FFA726'
      } else if (type === 'error') {
        toast.style.backgroundColor = '#EF5350'
      }
      
      document.body.appendChild(toast)
      
      // 显示动画
      setTimeout(() => {
        toast.style.opacity = '1'
        toast.style.transform = 'translateX(-50%) translateY(0)'
      }, 10)
      
      // 自动消失
      setTimeout(() => {
        toast.style.opacity = '0'
        toast.style.transform = 'translateX(-50%) translateY(-20px)'
        setTimeout(() => {
          document.body.removeChild(toast)
        }, 300)
      }, 3000)
    }
  }
}
</script>

<style>
  /* 全局样式已在main.js中通过import引入 */
  @import './assets/styles/memberTheme.css';
  @import './assets/styles/responsive.css';
  
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--light-bg);
  line-height: 1.6;
  /* 全局渐变背景 */
  background: linear-gradient(135deg, #fdfbf9 0%, #f9f7fd 100%);
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* 治愈系装饰元素 */
#app::before {
  content: '';
  position: fixed;
  top: 0;
  right: -10%;
  width: 40%;
  height: 40%;
  background: radial-gradient(circle, rgba(123, 104, 238, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: float 15s ease-in-out infinite;
}

#app::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: -10%;
  width: 30%;
  height: 30%;
  background: radial-gradient(circle, rgba(255, 154, 162, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: float 18s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  50% {
    transform: translateY(-20px) translateX(10px);
  }
}

.app-header {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: var(--text-color);
  padding: 1rem 0;
  box-shadow: var(--shadow-light);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
}

.logo:hover {
  transform: scale(1.05);
}

.logo-icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(123, 104, 238, 0.3));
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;
  transition: var(--transition);
  padding: 0.75rem 1.25rem;
  border-radius: 50px;
  position: relative;
  font-weight: 500;
}

.nav-link:hover {
  color: var(--primary-color);
  background-color: rgba(123, 104, 238, 0.08);
  transform: translateY(-2px);
}

.nav-link.router-link-active {
  color: white;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  box-shadow: var(--shadow);
}

.logout-btn {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.logout-btn:hover {
  color: var(--accent-color);
  background-color: rgba(255, 154, 162, 0.08);
  transform: translateY(-2px);
}

.app-main {
  flex: 1;
  padding: 3rem 2rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.app-footer {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: var(--text-light);
  text-align: center;
  padding: 2rem 0;
  margin-top: 3rem;
  border-top: 1px solid var(--light-border);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-content p:first-child {
  color: var(--primary-color);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.copyright {
  font-size: 0.9rem;
}

/* 通用卡片样式 - 更治愈系 */
.card {
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-bottom: 2rem;
  transition: var(--transition);
  border: 1px solid var(--light-border);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  opacity: 0;
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}

.card:hover::before {
  opacity: 1;
}

/* 通用按钮样式 - 更治愈系 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  font-weight: 500;
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: var(--transition);
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
  color: var(--text-color);
}

.btn-accent {
  background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
}

/* 通用标题样式 */
.section-title {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  color: var(--primary-color);
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), transparent);
  border-radius: 2px;
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 移动端菜单样式 */
.mobile-menu-btn {
  display: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-color);
  position: relative;
  transition: background-color 0.3s ease;
}

.menu-icon::before,
.menu-icon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: var(--text-color);
  transition: all 0.3s ease;
}

.menu-icon::before {
  top: -8px;
}

.menu-icon::after {
  bottom: -8px;
}

.mobile-menu {
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 1000;
  padding: 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease-out;
}

.mobile-menu ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

.mobile-menu li {
  margin: 12px 0;
}

.mobile-menu a,
.mobile-menu .logout-btn {
  display: inline-block;
  width: auto;
  padding: 0.8rem 2rem;
  font-size: 1rem;
}

/* 动画效果 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
  }
  
  .nav-links {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .logo {
    font-size: 1.5rem;
  }
  
  .app-main {
    padding: 2rem 1rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 1.3rem;
  }
  
  .app-main {
    padding: 1.5rem 0.8rem;
  }
  
  .section-title {
    font-size: 1.6rem;
  }
  
  .card {
    padding: 1.2rem;
  }
  
  .btn {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }
}
</style>